/**
 * Created by zhouli on 18/5/31
 */
import React from 'react';
import {connect} from 'react-redux';
import {Spin} from 'antd';
import {formatNumber, messages} from "share/common";
import FeeReportService from "containers/data-center/report/travel-report/fee-report/fee-report.service";
import 'styles/data-center/report/travel-report/fee-report/fee-report-overview.scss';
class FeeReportOverview extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      reportDetailTotalLoading: true,
      reportDetailTotal: {}
    };
  }

  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
  }

  // 获取费用分析报表明细-总金额，总人数，平均金额
  getReportDetailTotal = (searchParams) => {
    this.setState({
      reportDetailTotalLoading: true,
    });
    FeeReportService.getReportDetailTotal(searchParams)
      .then(data => {
        this.setState({
          reportDetailTotal: data,
          reportDetailTotalLoading: false,
        })
      })
      .catch(() => {
        this.setState({
          reportDetailTotalLoading: false,
        })
      })
  };

  render() {
    const {
      reportDetailTotalLoading,
      reportDetailTotal,//报表数据 总金额，总人数，平均金额
    } = this.state;
    return (
      <div className="fee-report-overview">
        <Spin spinning={reportDetailTotalLoading}>
          <div className="echarts-overview">
            <div className="echart-card-wrap">
              <div className="echart-card">
                <span className="echart-card-title">{messages('data-center.key70')/*总报销金额*/}</span>
                <span className="echart-card-number">
                {reportDetailTotal.baseAmount ? formatNumber(reportDetailTotal.baseAmount) : 0}
              </span>
              </div>
            </div>

            <div className="echart-card-wrap">
              <div className="echart-card">
                <span className="echart-card-title">{messages('data-center.key71')/*总人数*/}</span>
                <span className="echart-card-number">
                {reportDetailTotal.employeeQTY ? formatNumber(reportDetailTotal.employeeQTY) : 0}
              </span>
              </div>
            </div>

            <div className="echart-card-wrap">
              <div className="echart-card">
                <span className="echart-card-title">{messages('data-center.key72')/*员工平均金额*/}</span>
                <span className="echart-card-number">
                {reportDetailTotal.avgBaseAmount ? formatNumber(reportDetailTotal.avgBaseAmount) : 0}
              </span>
              </div>
            </div>
            <div className='clear'/>
          </div>

        </Spin>
      </div>
    );
  }
}

FeeReportOverview.propTypes = {};

FeeReportOverview.defaultProps = {};

function mapStateToProps(state) {
  return {
    profile: state.login.profile,
    user: state.login.user,
    tenantMode: state.main.tenantMode,
    company: state.login.company,
  }
}

export default connect(mapStateToProps)(FeeReportOverview);



